<template>
  <div class="container">
    <div class="rent_loading">
      <div style="display: flex; justify-content: center; align-items: center">
        <!-- <img class="rent_progress" src="@/assets/img/rent/ring@2x.png" />
        <span class="rent_progress_result">{{ progress }}%</span> -->
        <div ref="lottieContainer" style="width: 146px; height: 146px"></div>
      </div>

      <div class="rent_loading_result">{{ $t('rent_proccessing') }}</div>
      <div class="rent_loading_text">{{ $t('rent_donotClose') }}</div>
    </div>
  </div>
</template>
<script>
import $api from '@/assets/js/api/home'
import share from '@/mixins/share'
import lottie from 'lottie-web'
import animationData from '@/assets/js/loading_lottie.json'
export default {
  mixins: [share],
  data () {
    return {
      progress: 0,
      timer1: null,
      timer2: null,
      lastRentType: ''
    }
  },
  created () {
    this.getLang()
    this.progressBar()
    this.ordersResults(this.$route.query.orderNo);
    this.lastRentType = this.$route.query.lastRentType || localStorage.getItem('lastRentType') || ''
  },
  mounted () {
    this.lottieInstance = lottie.loadAnimation({
      container: this.$refs.lottieContainer, // 绑定 DOM
      renderer: 'svg', // 渲染方式：svg / canvas / html
      loop: true, // 是否循环播放
      autoplay: true, // 是否自动播放
      animationData: animationData // JSON 动画数据
    })
  },
  beforeDestroy () {
    this.clearOrderInterval()
    if (this.lottieInstance) {
      this.lottieInstance.destroy() // 组件销毁时清理动画
    }
  },
  methods: {
    //清除定时器
    clearOrderInterval () {
      if (this.timer1) {
        clearInterval(this.timer1)
        this.timer1 = null
      }
      if (this.timer2) {
        clearInterval(this.timer2)
        this.timer2 = null
      }
    },
    //进度
    progressBar () {
      // 设置初始值为0的变量来表示进度
      this.progress = 0
      // 创建一个计时器每50ms更新一次进度条
      this.timer1 = setInterval(() => {
        // 如果进度已经达到或超过了99%则清除计时器并结束操作
        if (this.progress >= 99) {
          clearInterval(this.timer1)
          return
        } else {
          this.progress += 1
        }
      }, 50)
    },
    //结果查询
    ordersResults (item) {
      this.getOrdersResults(item)
      let progress = 0
      this.timer2 = setInterval(() => {
        // 如果进度已经达到或超过了19则清除计时器并结束操作
        if (progress >= 19) {
          clearInterval(this.timer1)
          clearInterval(this.timer2)
          this.$router.push({
            path: '/rent/result',
            query: { type: 2 }
          })
          return
        } else {
          this.getOrdersResults(item)
          progress += 1
        }
      }, 3000)
    },
    //轮询结果
    getOrdersResults (item) {
      $api.getOrdersResult(item, true).then(res => {
        if (res.code == 0 && res.data) {
          // console.log(res.data);
          clearInterval(this.timer1)
          clearInterval(this.timer2)
          this.$router.replace({
            path: '/home',
            query: { type: 1 }
          })
          localStorage.setItem('actionType', 'back')
          localStorage.setItem('lastRentType', this.lastRentType)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.rent_loading {
  width: calc(100% - 28px);
  padding: 56px 14px 0;
  text-align: center;
  @-webkit-keyframes transform {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  .rent_progress {
    width: 85px;
    height: 85px;
    position: relative;
    animation: transform 0.5s linear infinite;
  }
  .rent_progress_result {
    position: absolute;
    width: 85px;
    top: 85.5px;
    left: 50%;
    margin-left: -42.5px;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    color: #889dbb;
    line-height: 24px;
  }
  .rent_loading_result {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: #889dbb;
    line-height: 24px;
    margin: 0 0 8px 0;
  }

  .rent_loading_text {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #889dbb;
    line-height: 16px;
  }
}
</style>
